<template>
    <div class="box">
        <div>
            <img class="bigPic" :src="banner.img" alt="Banner Image">
        </div>
        <div class="inputBox">
            <img class="picBig" src="/ss.png" alt="">
            <input type="text" placeholder="请输入你要搜索的课程">
        </div>
        <img class="heartPic" src="/sc.png" alt="">
        <div class="icon">
            <div v-for="item in nav" class="icon1">
                <img :src="item.img" alt="">
                <p>{{ item.name }}</p>
            </div>
        </div>
        <div class="neiBox">
            <div class="topText">
                <div class="pic1">
                    <img class="topTextPic" :src="recommend.icon" alt="">
                </div>
                <p class="new">最新推荐</p>
                <p>&gt;</p>
            </div>
            <div class="listBox">
                <div v-for="item in list">
                    <img class="listPic" :src="item.img" alt="">
                    <p class="content">{{ item.name }}</p>
                    <div class="listContent">
                        <span class="color">￥<span>{{ item.price }}</span></span>
                        <p class="number">{{ item.number }}人购买</p>
                    </div>
                </div>
            </div>
            <div class="topText1">
                <div class="pic2">
                    <img class="topTextPic1" :src="preferredcourses.icon" alt="">
                </div>
                <p class="new1">优选课程</p>
                <p>&gt;</p>
            </div>
            <div>
                <div v-for="item in preferredList" class="preferredList">
                    <img :src="item.img" alt="">
                    <div>
                        <p class="p1">{{item.name}}</p>
                        <p class="p2">{{item.desc}}</p>
                        <div class="preferredListBox">
                            <p class="p3">{{item.price}}元</p>
                            <p class="p4">立即报名</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup>
import '../../public/flexible.js'
import { inject, ref, onMounted, } from 'vue';
import axios from '../utils/http.js';
const banner = ref({})
const nav = ref([])
const recommend = ref({})
const list = ref([])
const preferredcourses = ref({})
const preferredList = ref([])
const $axios = inject('$axios');
onMounted(() => {
    // 使用 axios 获取本地 JSON 文件数据
    $axios.get('../public/data.json').then(res => {
        banner.value = res.index.banner
        nav.value = res.index.nav
        recommend.value = res.index.recommend
        list.value = res.index.recommend.list
        preferredcourses.value = res.index.preferred
        preferredList.value = res.index.preferred.list
    }).catch(error => {
        console.error('Error fetching data:', error);
    });
});


</script>

<style>
@import url('../style/app.css');
</style>
